<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
   <title>HTML basics</title>
   <meta name="description" content="HTML basics cheat sheet">
   <meta name="author" content="Hans de Rooij">
   <meta name="keywords" content="HTML basics cheat sheet 101 template">
   <meta name="version" content="2.00">
   <meta name="date" content="2013-03-25 09:00:00 CET">
   <meta name="copyright" content="&copy; 2013 Hans de Rooij">
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
   <h1>Document header (level 1)</h1>
   <h2>Document headers structure your page (level 2)</h2>
   <h3>Document headers can go six levels deep (level 3)</h3>

   <p>Perfectly ordinary paragraph</p>
   <p>Use <a href="http://www.google.com/" title="Jump to Google">this</a>
      hyperlink to jump to Google
   </p>
   <p>Make a <a href="#DestAnchor" title="Jump to destination anchor">jump</a>
      to the destination anchor defined in this document
   </p>

   <h3>More block level elements</h3>
   <p>This blockquote example contains the br element to force a new line.</p>
   <blockquote cite="http://www.shakespeare.com/">
      To be, or not to be, <br>
      that is the question
   </blockquote>
   <p><acronym title="HyperText Markup Language">HTML</acronym> lists are also
      block level elements.
   </p>
   <ol>
      <li>This is the first point I wanted to make.</li>
      <li>The second point is subdivided into two points;
         <ul>
            <li>The first, unordered, subpoint.</li>
            <li>The second, again unordered, subpoint.</li>
         </ul>
      </li>
      <li>There are two more points that I wanted to make. This is number
         three.</li>
      <li>Lastly point four.</li>
   </ol>

   <h3>Common inline elements</h3>
   <p>Most inline elements are very similar and have few attributes. The most
      commonly used inline elements are those used to markup phrases. Each of
      these elements has a different semantic meaning but they have the same
      syntax and characteristics.
   </p>
   <p>The <b>b</b> element suggests that the text be rendered as <b>bold</b>
      text. Probably an element such as <strong>strong</strong> is more
      appropriate since this element expresses the meaning of the markup more
      clearly. Another alternative for <b>bold</b> is <em>em</em> for 
      <em>emphasized</em>. More often however <em>em</em> is used as an 
      alternative for <i>i</i>. The <i>i</i> element stands for <i>italic</i>
      which is, of course, also an instruction primarily related to the
      rendering of text.
   </p>

   <!-- Start of HTML comment
      Please find listed below an example of a tabular data table
      Table tags missing from this example are;
         * colgroup is used most often in conjunction with the rules attribute
                    of the table tag to put borders between groups of columns.
         * col      defines the properties of one column except when used with
                    the span attibute. If the span attribute is set to a value
                    larger than one then the formating will apply to multiple
                    columns.
         * tfoot    indicates that a group of rows form the table footer.
      BTW table is a block level element!

      Last line of HTML comment.
   -->
   <table border="2">
   <thead>
      <tr><th colspan="2">Overview of other inline elements</th></tr>
      <tr><th>Tag</th><th>Use tage to ...</th></tr>
   </thead>
   <tbody>
   <tr>
      <td>cite</td>
      <td> ... indicate a <cite>citation or reference</cite> such as the title
         of a text being referred to.
      </td>
   </tr><tr>
      <td>dfn</td>
      <td> ... mark the <dfn>defining instance</dfn> of a term, the first time
         it's mentioned in the text.
      </td>
   </tr><tr>
      <td>q</td>
      <td> ... mark up short quotations. The q tag is the inline equivalent of
         the blockquote element. I was once told <q>the q tag is used when 
         quoting a small portion of text</q>. To which I replied <q>if you say
         so</q>.
      </td>
   </tr><tr>
      <td>code</td>
      <td> ... indicate that a fragment of text is computer code. For example;
         <code>i = j + 1;</code>
      </td>
   </tr><tr>
      <td>kbd</td>
      <td> ... indicate <kbd>text entered by a user</kbd> when using a
         computer.
      </td>
   </tr><tr>
      <td>var</td>
      <td> ... markup a <var>variable</var> in a computer program.</td>
   </tr><tr>
      <td>samp</td>
      <td> ... indicate that a fragment of text is <samp>sample output</samp>
         from a computer program.
      </td>
   </tr><tr>
      <td>abbr</td>
      <td> ... indicate an <abbr>abbreviation</abbr>. The abbreviated term is
         not spelled out in full but is written using less characters (such as
         <abbr>etc.</abbr>, <abbr>i.e.</abbr>).
      </td>
   </tr><tr>
      <td>acronym</td>
      <td> ... denote an acronym, that is a series of characters representing
         a phrase (such as <acronym>HTML</acronym>, <acronym>HTTP</acronym>).
      </td>
   </tr><tr>
      <td>ins</td>
      <td> ... indicate that the text has been <ins>inserted</ins> into the
         document since the last revision.
      </td>
   </tr><tr>
      <td>del</td>
      <td> ... indicate that the text has been <del>deleted</del> from the
         document since the last revision.
      </td>
   </tr><tr>
      <td>sup</td>
      <td> ... create text that is rendered in superscript. Can also be used,
         in conjunction with hyperlinks, to make footnotes<sup>1</sup>.
      </td>
   </tr><tr>
      <td>sub</td>
      <td> ... create text that is rendered in subscript. The sub tag is of
         value for constructing chemical formulas or mathematical expressions
         like H<sub>2</sub>O.
      </td>
   </tr>
   </tbody>
   </table>

   <h3>Closing remarks</h3>
   <p><a name="DestAnchor">The destination anchor</a> is the link target</p>
   <p>For more information on HTML form elements follow <a href="./form.html"
      title="Jump to HTML form cheat sheet">this</a> link. You can download
      the most recent version of this document from <a
      href="http://cheat-sheets.googlecode.com/svn/trunk/html/basics.html"
      title="Download this document">Google code</a>.
   </p>

   <hr>
   <address>
      Comments to <a href="mailto:HansDeRooij@Hotmail.com" title="author">
      Hans de Rooij</a>
   </address>

   <p>
      <img src="../imgs/BubbleBoy.jpg" align="middle" alt="BubbleBoy">
      <img src="../imgs/UbuntuServer.png" align="middle" alt="Ubuntu Server">
      <img src="../imgs/ApacheLogo.png" align="middle" alt="Apache Server">
      <a href="http://validator.w3.org/check?uri=referer">
         <img src="http://www.w3.org/Icons/valid-html401.gif"
              align="middle" alt="Valid HTML 4.01 Transitional" border="0">
      </a>
      &nbsp;<br>
      &nbsp;<br>
      &nbsp;<br>
   </p>

   <p>basics.html is a HyperText Markup Language cheat sheet</p>
   <p>&copy; 2011 Hans de Rooij</p>
   <p>This program is free software; you can redistribute it and/or modify it
      under the terms of the GNU General Public License as published by the 
      Free Software Foundation; either version 2 of the License, or (at your
      option) any later version.
   </p>
   <p>This program is distributed in the hope that it will be useful, but 
      WITHOUT ANY WARRANTY; without even the implied warranty of 
      MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
      Public License for more details.
   </p>
   <p>Please visit the website of the <a href="http://www.fsf.org/"
      title="Free Software Foundation">Free Software Foundation</a> for more
      information about the <a href="http://www.gnu.org/licenses/#GPL" 
      title="GNU General Public License">GNU GPL</a>.
   </p>
</body>
</html>

